import { Component } from '@angular/core';
import {
  OnInit,
  OnChanges,
  SimpleChanges,
  DoCheck,
  AfterContentInit,
  AfterContentChecked,
  AfterViewInit,
  AfterViewChecked,
  OnDestroy,
} from '@angular/core';

import('@angular/core');

@Component({
  selector: 'app-sunshine',
  standalone: true,
  imports: [],
  // templateUrl: './sunshine.component.html',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    <h4>{{ context }}</h4>
    <p [id]="sayHelloId" [style.color]="fontColor">
      You can set my color in the component!
    </p>
    <button type="button" [disabled]="canClick" (click)="sayMessage()">
      Trigger alert message
    </button>
    <input type="text" />
  `,
  styleUrls: ['./sunshine.component.css'],
})
export class SunshineComponent
  implements
    OnInit,
    OnChanges,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy
{
  // 如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
  ngOnChanges(changes: SimpleChanges): void {
    // 这发生得比较频繁，所以你在这里执行的任何操作都会显著影响性能。
    console.log('==============ngOnChanges===============', changes);
  }
  // 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
  //在第一轮 ngOnChanges() 完成之后调用，只调用一次。而且即使没有调用过 ngOnChanges()，也仍然会调用 ngOnInit()（比如当模板中没有绑定任何输入属性时）。
  ngOnInit(): void {
    console.log('==============ngOnInit===============');
  }

  // 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应 紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用
  ngDoCheck(): void {
    console.log('Method ngDoCheck implemented.');
  }

  // 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用 第一次 ngDoCheck() 之后调用，只调用一次。
  ngAfterContentInit(): void {
    console.log('Method ngAfterContentInit implemented.');
  }
  //每当 Angular 检查完被投影到组件或指令中的内容之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
  ngAfterContentChecked(): void {
    console.log('Method ngAfterContentChecked implemented.');
  }
  // 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。 第一次 ngAfterContentChecked() 之后调用，只调用一次。
  ngAfterViewInit(): void {
    console.log('Method ngAfterViewInit implemented.');
  }
  //每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用
  // ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
  ngAfterViewChecked(): void {
    console.log('Method ngAfterViewChecked implemented.');
  }
  // 每当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
  // 在 Angular 销毁指令或组件之前立即调用。
  ngOnDestroy(): void {
    console.log('Method ngOnDestroy implemented.');
  }
  context = 'this is a sunshine component.';
  sayHelloId = 'say';
  fontColor = 'red';
  message = '1232123123message';

  canClick = false;
  sayMessage() {
    if (this.canClick) {
      this.canClick = false;
    } else {
      this.canClick = true;
    }
    alert(this.canClick);
    alert(this.message);
  }
}
